<template>
  <el-dialog title="出入库记录" :visible="recordVisible" :center="true" width="74%" @close="closeDialog" :close-on-click-modal="false">
    <el-table :data="recordData" :border="true" size="mini" :show-summary="true"
              @selection-change="handleSelectionChange">
      <el-table-column label="#" width="70" type="index"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="规格/型号" prop="model"></el-table-column>
      <el-table-column label="单位" prop="unit"></el-table-column>
      <el-table-column label="数量" prop="number"></el-table-column>
      <el-table-column label="单价" prop="unitPriceBeforeTax" v-if="showPriceColumn"></el-table-column>
      <el-table-column label="总价" prop="amountBeforeTax" v-if="showPriceColumn"></el-table-column>
      <el-table-column label="项目号" prop="project"></el-table-column>
      <!--      <el-table-column label="地址" prop="positionName"></el-table-column>-->
      <el-table-column label="操作" prop="operation"></el-table-column>
      <el-table-column label="采购/领用人" prop="createBy"></el-table-column>
      <el-table-column label="保管员" prop="custodian"></el-table-column>
<!--      <el-table-column label="审核" prop="reviewer"></el-table-column>-->
      <el-table-column label="时间" prop="createTime"></el-table-column>
      <el-table-column type="selection" width="70"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="print" size="mini">打 印</el-button>
      <el-button type="primary" @click="confirm" size="mini">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "MaterialRecords",
  props: {
    recordVisible: Boolean,
    recordData: Array
  },
  data() {
    return {
      selectedRows: [],
      showPriceColumn:false,
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val;  // 更新选中的行数据
    },
    checkPermissions() {
      const userInfo = JSON.parse(localStorage.getItem('user')); // 确保这里是正确的键名
      this.showPriceColumn = userInfo.authorities.some(authority => authority.authority === 'ROLE_SHOW_PRICE');
    },
    print() {
      let printContent = `<table border="1" style="width:100%; border-collapse:collapse;">`;
      printContent += `<tr">
        <th>#</th>
        <th>名称</th>
        <th>规格/型号</th>
        <th>单位</th>
        <th>数量</th>
        <th>单价</th>
        <th>总价</th>
        <th>项目号</th>
        <th>操作</th>
        <th>采购/领用</th>
        <th>验收/保管</th>
        <th>审核</th>
        <th>时间</th>
      </tr>`;
      this.selectedRows.forEach((row, index) => {
        printContent += `<tr>
          <td>${index + 1}</td>
          <td>${row.name}</td>
          <td>${row.model}</td>
          <td>${row.unit}</td>
          <td>${row.number}</td>
          <td>${row.unitPriceBeforeTax}</td>
          <td>${row.amountBeforeTax}</td>
          <td>${row.project}</td>
          <td>${row.opertaion}</td>
          <td>${row.createBy}</td>
          <td>${row.custodian}</td>
          <td>${row.reviewer}</td>
          <td>${row.createTime}</td>
        </tr>`;
      });
      printContent += `</table>`;

      const printWindow = window.open('', '_blank', 'width=800,height=600');
      printWindow.document.open();
      printWindow.document.write(`<html><head><title>&nbsp;</title>
   <style>
      h1 { text-align: center; font-weight: normal; font-size: 15px; color: #303133}
      body { font-family: 'Arial', sans-serif; font-size: 13px; font-weight: 100; }
      table { width: 100%; border-collapse: collapse; }
      th, td { border: 1px solid #DCDFE6; padding: 8px; text-align: left; }
      th { color: #303133; font-size: 13px; font-weight: 100; }
      td { font-size: 13px; font-weight: 100; color: #606266; }
      tr:nth-child(even) { background-color: #E1F3D8; }
    </style>
        </head><body><h1>出入库记录</h1>${printContent}</body></html>`);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    },
    confirm() {
      this.$emit('update:recordVisible', false)
    },
    closeDialog() {
      this.$emit('update:recordVisible', false)
    }
  },
  mounted() {
    this.checkPermissions();
  }
}
</script>

<style scoped>

</style>